<template>
  <el-button type="primary" @click="handleUpdate">修改</el-button>
  <el-button type="primary" @click="handleAdd">添加</el-button>
  <el-button type="primary" @click="handleDelete">删除</el-button>
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column label="上牌时间" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="carType" label="车型" width="120" />
    <el-table-column property="carNo" label="车牌" />
    <el-table-column property="carImgs" label="图片">
      <template #default="scope">
        <el-image :preview-teleported="true" style="width: 100px; height: 100px" :src="scope.row.carImgs[0]"
          :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="scope.row.carImgs" fit="cover" />
      </template>
    </el-table-column>
  </el-table>
  <!-- 模态框 -->
  <el-dialog v-model="dialogTableVisible" :title="title">

    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
      status-icon>
      <el-form-item label="车型" prop="carType">
        <el-input v-model="ruleForm.carType" />
      </el-form-item>
      <el-form-item label="上牌时间" prop="date">
        <el-date-picker v-model="ruleForm.date" type="date" placeholder="Pick a day" :size="size" />
      </el-form-item>
      <el-form-item label="车牌照" prop="carNo">
        <el-input v-model="ruleForm.carNo" />
      </el-form-item>
      <el-form-item label="图片" prop="carNo">

        <el-upload v-model:file-list="fileList" action="api/upload" list-type="picture-card"
          :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleSuccessUpload">
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>

      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ElMessage, ElSwitch } from 'element-plus'
import { h } from 'vue'
import axios from 'axios'
export default {
  name: 'carmain',
  data() {
    return {
      dialogImageUrl: null,
      dialogVisible: false,
      ruleForm: {

      },
      title: '新增',
      dialogTableVisible: false,
      multipleSelection: [],
      tableData: [],
      fileList: []
    }
  },
  created() {
    this.query()
  },
  methods: {
    query() {
      axios.get("api/car.action", null).then(r => {
        this.tableData = r.data.data
       
        this.tableData.forEach(item => {
          item.carImgs = item.carImgs.split(';')
          item.carImgs = item.carImgs.map(n => 'http://localhost:8080/images/' + n)
        })
      })
    }, 
    handleSelectionChange(val) {
      this.multipleSelection = val

    },
    handleUpdate() {
      if (this.multipleSelection.length != 1) {
        ElMessage({
          message: h('p', null, [
            h('span', null, '修改智能选择一条 '),
            h('i', { style: 'color: red' }, '记录'),
          ]),
        })
      } else {

        this.dialogTableVisible = true
        this.title = "修改"
        this.formReset()
        
        this.ruleForm = this.multipleSelection[0]

        this.fileList =  this.multipleSelection[0].carImgs.map(item => {return {name: item.replaceAll(/http:.+images\//ig, ''), url: item}})

      }
    },
    beforeAvatarUpload(rawFile) {
      if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
      }
      return true
    },
    handleSuccessUpload(reps, file) {

      if (reps.code == 50000)
        file.name = reps.message
      else 
        this.fileList.unshift()
    },
    handleRemove(file) {
      // debugger
      // axios.get("api/deleteImage", {params: {img: file.name}}).then(r => {
      //   ElMessage.success('删除加成功')
      // })
    },
    handlePictureCardPreview(uploadFile) {
      this.dialogImageUrl = uploadFile.url
      this.dialogVisible = true
    },
    formReset() {
      this.ruleForm =  {}
      this.fileList = []
    },
    handleAdd() {
      this.title = "新增";
      this.formReset();
      this.dialogTableVisible = true

    },
    handleSubmit() { // 确定按钮
      if (this.title == '新增') {
        // 组装 filelist文件 形成格式
        this.ruleForm.carImgs = this.fileList.map(k => k.name).join(';')
        axios.post('api/car.action',  this.ruleForm).then((r) => {
          this.dialogTableVisible = false // 关闭模态框dialog
          ElMessage.success('添加成功')
          // 调用重新检索
          this.query()
        })
      } else {
        // 组装 filelist文件 形成格式
        this.ruleForm.carImgs = this.fileList.map(k => k.name).join(';')
        axios.put('api/car.action',  this.ruleForm).then((r) => {
          this.dialogTableVisible = false // 关闭模态框dialog
          ElMessage.success('添加成功')
          // 调用重新检索
          this.query()
        })
      }
     
    },
    handleDelete() {
      let carNos = this.multipleSelection.map(item => item.carNo)
      axios.delete('api/car.action/'+ carNos).then(r => {
        ElMessage.success('删除成功')
        this.query()
      })
    }

  }
}

</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>